<include file="Public/header"/>
<link rel="stylesheet" href="__STATIC__/css/flow.css">
<style>
body, button, input, select, textarea {
    font-size: 14px;font-family: arial,微軟雅黑;
}
.g-Total {
    background: #fff;border-bottom: 1px solid #DCDCDC; line-height: 30px;
    padding: 5px 10px 0; font-size: 14px;
}
a.gray9, .gray9 {color: #999;}
.g-member {background: #fff;padding: 10px 5px;}
.g-Recharge ul {zoom: 1;}
.g-Recharge li a.z-sel {
    border: 1px solid #000; color: #666;
}
.g-Recharge li .z-initsel {
    border: 1px solid #000;
}
.g-Recharge li .z-init {
    width: 90%;padding: 7px 0; text-align: center;border: none;
}
.g-Recharge li .z-initsel input {
    color: #666;
}
.g-Recharge li a.z-sel s, .g-Recharge li .z-initsel s {
    width: 18px;height: 18px;
    position: absolute; right: -1px; bottom: -1px;
    display: inline-block;background-position: 0 0;
}
.g-Recharge li:nth-child(3n-1) {
    width: 34%;text-align: center;
}
.g-Recharge li:nth-child(3n-3) {
    text-align: right;
}
.g-Recharge li {
    width: 33%;float: left;margin-bottom: 10px;
}
.g-pay-ment {
    overflow: hidden;
}
.m-round {
    border: 1px solid #DCDCDC;border-radius: 5px;
    background: #fff;box-shadow: 1px 1px 1px #e7e7e7;
}
.mt10 {
    margin-top: 10px;
}
.g-Recharge li a, .g-Recharge li .z-initsel, .g-Recharge li b {
    color: #959595;width: 90%;
    line-height: 30px;display: inline-block;
    background: #fff;border-radius: 5px;
    text-align: center;border: 1px solid #EAEAEA;
    box-shadow: 1px 1px 1px #EDEDED; position: relative;
}
.z-sel s, .z-initsel s, .z-Btn-Close b, .z-Btn-Rotation b, .z-Btn-del b, .z-Btn-ok b {
    background: url(__STATIC__/images/member-icon.png?v=130825);background-size: 40px auto;
}
.z-bank-Round {
    width: 16px;
    height: 16px;border: 1px solid #bbb;
    background: #fff;border-radius: 16px;
    display: inline-block;margin-right: 8px;
    box-shadow: 0 1px 1px #ccc inset;
}
.z-bank-Roundsel s {
    width: 12px;height: 12px;border-radius: 12px;display: inline-block;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ff8a00),color-stop(1,#f60));
}
.f-Recharge-btn {display: block;}
a.orgBtn {background: #000;border: 1px solid #000;}
.orgBtn {
    display: block; width: 100%;
    -webkit-box-sizing: border-box;
    height: 43px;line-height: 43px;
    text-align: center; color: #fff!important;
    border-radius: 5px;font-size: 18px;
}
.clearfix { display: block;}
.z-bank-Roundsel {
    width: 16px;height: 16px;line-height: 20px;border: 1px solid #ccc;background: #F6F5F5;
    border-radius: 16px;display: inline-block;text-align: center;margin-right: 8px;
}
.g-pay-ment li {
    line-height: 36px;border-top: 1px dotted #CBCBCB;max-height: 40px;
    padding: 0 10px;overflow: hidden;margin-top: -1px;
}
.clearfix:after {
    content: ".";display: block;height: 0;clear: both;visibility: hidden;
}
.orange {color: #E50000;}
</style>
<body >
<div class="tab_nav tab_nav_none">
    <div class="header">
	<a href="javascript:void(0);" onClick="javascript:history.go(-1);" class="header_l"><i class="fa fa-angle-left"></i></a>
      <div class="h-mid">充值   </div>
	<a href="{:U('Index/index')}" class="header_r"><i class="fa fa-home"></i></a>
	  
    </div>
</div>
<div id="tbh5v0" >
	<div class="g-Total gray9">您的當前余額：<span class="orange arial">{$user.user_money}</span>元</div>
	<form method="post"  id="recharge_form" action="{:U('Mobile/Payment/getPay')}">
	<section class="clearfix g-member">
           <div class="g-Recharge">
               <ul id="ulOption">
                   <li money="10"><a href="javascript:;" class="z-sel">10元<s></s></a></li>
                   <li money="50"><a href="javascript:;">50元<s></s></a></li>
                   <li money="100"><a href="javascript:;">100元<s></s></a></li>
                   <li money="500"><a href="javascript:;">500元<s></s></a></li>
                   <li money="1000"><a href="javascript:;">1000元<s></s></a></li>
                   <li><b>
                       <input type="text" id="input_val" class="z-init" placeholder="輸入金額" maxlength="8" value="{$order.account}"><s></s></b></li>
               </ul>
           </div>
		<div class="clearfix mt10 m-round g-pay-ment g-bank-ct">
               <ul id="ulBankList" class="nav nav-list-sidenav">
                   <li class="gray6">選擇網銀充值<em class="orange">10</em>元</li>
                   <foreach name="paymentList" item="v"  key="k"> 
                    <li class="clearfix" name="payment_name">
                      <label>
                          <input type="radio"  value="pay_code={$v['code']}" class="c_checkbox_t" name="pay_radio" <if condition="$order[pay_code] eq $v[code]">checked</if> />
                          <div class="fl shipping_title">{$v['name']}
                          </div>
                      </label>
                    </li>
                   </foreach> 
               </ul>
           </div>
           <div class="mt10 f-Recharge-btn">
               <a id="btnSubmit" href="javascript:;" class="orgBtn" onClick="recharge_submit()">確認充值</a>
           </div>
           <input type="hidden" name="account" id="add_money" value="50">
           <input type="hidden" name="order_id" value="{$order.order_id}">
      </section>
      </form>
</div>
<include file="Public/footer_nav"/>
</body>
<script type="text/javascript">
$(function () {
	//$("input[name='pay_radio']").first().trigger('click');
     $(".g-Recharge ul li").click(function () {
        $(this).find('a').addClass('z-sel')
        $(this).siblings().find('a').removeClass('z-sel');
        $('.gray6').find('em').html($(this).attr('money'));
        $('#add_money').val($(this).attr('money'));
     });
});

function change_pay(obj)
{
    $(obj).parent().siblings('input[name="pay_radio"]').trigger('click');
}

function recharge_submit(){
	var input_val = parseInt($('#input_val').val());
	if(input_val>0){
		$('#add_money').val(input_val);
	}
	var account = $('#add_money').val();
	if(isNaN(account) || parseInt(account)<=0 || account==''){
		alert('請輸入正確的充值金額');
		return false;
	}
	$('#recharge_form').submit();
}
</script>
</html>